@charset "utf-8";

$color: #b20000;
$width: 90%;
$colorGray: #8E8E8E;
@function r($px) {
	@return $px / 40 * 1rem;
}

html,body {
	width: 100%;
	height: 100%;
}
.web {
	position: relative;
	width: 100%;
	height: 100%;
}
// 头部
header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: r(89);
	background-color: $color;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 99;
	.left_logo {
		position: relative;
		margin-left: r(23);
		i {
			font-size: r(42);
		}
		&::after {
			content: "1";
			position: absolute;
			border-radius: 50%;
			top: r(-10);
			right: r(-10);
			width: r(26);
			height: r(26);
			background-color: red;
			text-align: center;
			line-height: r(26);
			font-size: r(18);
			font-weight: bold;
		}
	}
	.middle_logo {
		width: r(264);
		height: r(39);
		img {
			width: 100%;
			display: block;
		}
	}
	.search_logo {
		margin-right: r(16);
			
		i {
			font-size: r(32);
			border: 1px solid white;
			padding: r(5);
			border-radius: 50%;
		}
	}
}
// 底部
footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: r(96);
	background-color: #f5f5f5;
	ul {
		display: flex;
		height: 100%;
		border-top: 1px solid #bbb9ba;
		box-sizing: border-box;
		li {
			width: 20%;
			height: 100%;
			a {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				color: #8b8b8b;
				.iconfont {
					font-size: r(34);
				}
				p {
					margin-top: r(10);
					font-size: r(18);
				}
			}
		}
		.active a {
			color: $color;
		}
	}
}
// 登录和搜索
#login,#search {
	display: none;
}
#login:checked ~ .login_box {
	visibility: visible;
	transform: translateX(0);
}
#search:checked ~ .search_box {
	visibility: visible;
	transform: translateY(0);
}
.login_box {
	position: absolute;
	visibility: hidden;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,.9);
	transform: translateX(-100%);
	transition: all .5s;
	z-index: 100;
	color: white;
	.l_top {
		display: flex;
		justify-content: space-between;
		padding: r(18) 0;
		margin: 0 r(12);
		border-bottom: 1px solid #524e4d;
		.close {
			width: r(58);
			height: r(58);
			line-height: r(58);
			text-align: center;
			background-color: $color;
			border-radius: r(58);
			i {
				font-size: r(30);
			}
		}
		.l_search {
			position: relative;
			input {
				width: r(500);
				height: r(58);
				border: 1px solid #fcfcfc;
				border-radius: r(58);
				background-color: transparent;
				color: white;
				font-size: r(26);
				padding-left: r(70);
				padding-right: r(25);
			}
			i {
				position: absolute;
				top: 50%;
				left: r(20);
				transform: translateY(-50%);
				font-size: r(30);
			}
		}
	}
	.l_content {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: r(95);
		img {
			width: r(145);
			height: r(145);
		}
		a {
			display: inline-block;
			color: white;
			&:first-of-type {
				font-size: r(26);
				margin-top: r(27);
			}
			&:last-of-type {
				font-size: r(18);
				margin-top: r(15);
				text-decoration: underline;
				color: #535152;
			}
		}
	}
	.bottom_line {
		height: r(28);
		background-color: #303030;
		margin-top: r(68);
	}
	.list {
		padding: r(10) r(20);
		li {
			position: relative;
			padding: r(20) 0;
			font-size: r(20);
			&:not(:last-child) {
				border-bottom: 1px solid #343434;
			}
			&::after {
				content: ">";
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		}
	}
	// #login_btn:checked ~ .l_content {
	// 	display: block;
	// }
}
.search_box {
	position: absolute;
	visibility: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translateY(-100%);
	background-color: #f1f1f1;
	z-index: 100;
	transition: all .5s;
	.s_header {
		padding: r(10);
		background-color: #1f1f1f;
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.s_search {
			position: relative;
			input {
				width: r(550);
				height: r(58);
				border-radius: r(58);
				border: 1px solid white;
				background-color: transparent;
				padding-left: r(60);
				padding-right: r(25);
				color: white;
				font-size: r(24);
			}
			i {
				position: absolute;
				top: 50%;
				left: r(15);
				transform: translateY(-50%);
				font-size: r(30);
			}
		}
		p {
			font-size: r(26);
		}
	}
	.hot {
		padding: r(20);
		h4 {
			font-size: r(24);
			font-weight: bold;
		}
		ul {
			display: flex;
			flex-wrap: wrap;
			font-size: r(26);
			li {
				background-color: white;
				padding: r(10) r(20);
				margin: r(10);
				color: #888888;
			}
		}
	}
}